<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交易分析</title>
    <!-- 使用CDN引入CSS -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <style>
        .card {
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            padding: 15px 20px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
        .card-body {
            padding: 20px;
        }
        .chart-container {
            height: 400px;
            margin-bottom: 20px;
        }
        .stat-card {
            text-align: center;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .stat-card .stat-value {
            font-size: 2rem;
            font-weight: bold;
            margin: 10px 0;
        }
        .stat-card .stat-title {
            font-size: 1rem;
            color: #6c757d;
        }
        .stat-card .stat-icon {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        .bg-light-blue {
            background-color: #e3f2fd;
        }
        .bg-light-green {
            background-color: #e8f5e9;
        }
        .bg-light-yellow {
            background-color: #fffde7;
        }
        .bg-light-red {
            background-color: #ffebee;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <h2 class="mt-4 mb-4">交易分析</h2>
        
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-filter mr-1"></i>筛选条件
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="dateRange">时间范围</label>
                            <select id="dateRange" class="form-control">
                                <option value="7">近7天</option>
                                <option value="30" selected>近30天</option>
                                <option value="90">近90天</option>
                                <option value="180">近半年</option>
                                <option value="365">近一年</option>
                                <option value="custom">自定义</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="startDate">开始日期</label>
                            <input type="text" class="form-control datepicker" id="startDate" placeholder="选择开始日期" disabled>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="endDate">结束日期</label>
                            <input type="text" class="form-control datepicker" id="endDate" placeholder="选择结束日期" disabled>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <button type="button" class="btn btn-primary btn-block" id="analyzeBtn">
                                <i class="fas fa-chart-line"></i> 分析
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 统计卡片 -->
        <div class="row">
            <div class="col-md-3">
                <div class="card stat-card bg-light-blue">
                    <div class="stat-icon text-primary">
                        <i class="fas fa-exchange-alt"></i>
                    </div>
                    <div class="stat-value text-primary" id="totalTransactions">1,284</div>
                    <div class="stat-title">交易总数</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card bg-light-green">
                    <div class="stat-icon text-success">
                        <i class="fas fa-yuan-sign"></i>
                    </div>
                    <div class="stat-value text-success" id="totalAmount">¥1,256,890</div>
                    <div class="stat-title">交易总额</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card bg-light-yellow">
                    <div class="stat-icon text-warning">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="stat-value text-warning" id="avgDailyTransactions">42.8</div>
                    <div class="stat-title">日均交易量</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card bg-light-red">
                    <div class="stat-icon text-danger">
                        <i class="fas fa-percentage"></i>
                    </div>
                    <div class="stat-value text-danger" id="growthRate">+12.5%</div>
                    <div class="stat-title">环比增长率</div>
                </div>
            </div>
        </div>
        
        <!-- 交易趋势图 -->
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-chart-line mr-1"></i>交易趋势
            </div>
            <div class="card-body">
                <div id="transactionTrendChart" class="chart-container"></div>
            </div>
        </div>
        
        <div class="row">
            <!-- 交易类型分布 -->
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-chart-pie mr-1"></i>交易类型分布
                    </div>
                    <div class="card-body">
                        <div id="transactionTypeChart" class="chart-container"></div>
                    </div>
                </div>
            </div>
            
            <!-- 产品交易TOP10 -->
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-chart-bar mr-1"></i>产品交易TOP10
                    </div>
                    <div class="card-body">
                        <div id="productTopChart" class="chart-container"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <!-- 仓库交易分布 -->
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-warehouse mr-1"></i>仓库交易分布
                    </div>
                    <div class="card-body">
                        <div id="warehouseDistributionChart" class="chart-container"></div>
                    </div>
                </div>
            </div>
            
            <!-- 月度交易对比 -->
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-chart-bar mr-1"></i>月度交易对比
                    </div>
                    <div class="card-body">
                        <div id="monthlyComparisonChart" class="chart-container"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 使用CDN引入JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script th:src="@{/js/transaction/analysis.js}"></script>
    
    <script>
        $(document).ready(function() {
            // 初始化日期选择器
            $('.datepicker').datepicker({
                format: 'yyyy-mm-dd',
                autoclose: true,
                language: 'zh-CN'
            });
            
            // 日期范围选择变化事件
            $('#dateRange').change(function() {
                if ($(this).val() === 'custom') {
                    $('#startDate, #endDate').prop('disabled', false);
                } else {
                    $('#startDate, #endDate').prop('disabled', true);
                }
            });
            
            // 分析按钮点击事件
            $('#analyzeBtn').click(function() {
                // 实际项目中应根据查询条件从后端获取数据
                alert('分析功能将根据实际后端接口实现');
                // 这里模拟重新加载图表
                initCharts();
            });
            
            // 初始化所有图表
            initCharts();
        });
        
        // 初始化图表
        function initCharts() {
            // 交易趋势图
            var trendChart = echarts.init(document.getElementById('transactionTrendChart'));
            var trendOption = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['交易数量', '交易金额(万元)']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '交易数量'
                    },
                    {
                        type: 'value',
                        name: '交易金额(万元)',
                        axisLabel: {
                            formatter: '{value} 万元'
                        }
                    }
                ],
                series: [
                    {
                        name: '交易数量',
                        type: 'line',
                        data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
                    },
                    {
                        name: '交易金额(万元)',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [22, 18, 19, 23, 29, 33, 31, 40, 38, 42, 50, 58]
                    }
                ]
            };
            trendChart.setOption(trendOption);
            
            // 交易类型分布图
            var typeChart = echarts.init(document.getElementById('transactionTypeChart'));
            var typeOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: ['采购入库', '销售出库', '库存调拨', '库存盘点']
                },
                series: [
                    {
                        name: '交易类型',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 335, name: '采购入库'},
                            {value: 310, name: '销售出库'},
                            {value: 234, name: '库存调拨'},
                            {value: 135, name: '库存盘点'}
                        ]
                    }
                ]
            };
            typeChart.setOption(typeOption);
            
            // 产品交易TOP10图
            var productChart = echarts.init(document.getElementById('productTopChart'));
            var productOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['交易数量', '交易金额(万元)']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: ['大米', '小麦', '玉米', '高粱', '大豆', '花生', '土豆', '红薯', '白菜', '萝卜']
                },
                series: [
                    {
                        name: '交易数量',
                        type: 'bar',
                        data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390]
                    },
                    {
                        name: '交易金额(万元)',
                        type: 'bar',
                        data: [120, 102, 101, 134, 190, 130, 120, 101, 134, 190]
                    }
                ]
            };
            productChart.setOption(productOption);
            
            // 仓库交易分布图
            var warehouseChart = echarts.init(document.getElementById('warehouseDistributionChart'));
            var warehouseOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: ['1号仓', '2号仓', '3号仓', '4号仓', '5号仓']
                },
                series: [
                    {
                        name: '仓库交易',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            {value: 335, name: '1号仓'},
                            {value: 310, name: '2号仓'},
                            {value: 234, name: '3号仓'},
                            {value: 135, name: '4号仓'},
                            {value: 1548, name: '5号仓'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            warehouseChart.setOption(warehouseOption);
            
            // 月度交易对比图
            var monthlyChart = echarts.init(document.getElementById('monthlyComparisonChart'));
            var monthlyOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['2022年', '2023年']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '2022年',
                        type: 'bar',
                        data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
                    },
                    {
                        name: '2023年',
                        type: 'bar',
                        data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149]
                    }
                ]
            };
            monthlyChart.setOption(monthlyOption);
            
            // 窗口大小变化时重新调整图表大小
            window.addEventListener('resize', function() {
                trendChart.resize();
                typeChart.resize();
                productChart.resize();
                warehouseChart.resize();
                monthlyChart.resize();
            });
        }
    </script>
</body>
</html> 